<!--
* @desc
* @Author: bitqiang<bitqiang@outlook.net>
* @date: 2018/6/28 11:30
-->

<template>
  <div>
    <div>{{status}}</div>
    <canvas
      canvas-id="__my_canvas__"
      @touchstart="touchstart"
      @touchmove="touchmove"
      @touchend="touchend"
      @tap="handleclick"
      disable-scroll
      :style="{ width: _width + 'px', height: _height + 'px', background: 'rgba(0, 0, 0, .8)' }">
    </canvas>
  </div>
</template>

<script>
  export default {
    props: {
      width: {
        type: Number
      },
      height: {
        type: Number
      }
    },
    data () {
      return {
        status: '未知'
      }
    },
    computed: {
      _width () {
        return this.width
      },
      _height () {
        return this.height
      }
    },
    methods: {
      handleclick (e) {
        this.status = '点击'
        console.log('MyCanvas.handleclick')
      },
      touchstart (e) {
        this.status = '开始'
        console.log('MyCanvas.touchstart')
      },
      touchmove (e) {
        this.status = '移动'
        console.log('MyCanvas.touchmove')
      },
      touchend (e) {
        this.status = '结束'
        console.log('MyCanvas.touchend')
      }
    },
    mounted () {
      console.log('MpCropper.mounted')
    }
  }
</script>

